<template>
  <div class="yzSupplyLease">
    <c-title :hide="false" text="租赁"></c-title>
    <div class="headTop">
      <div class="local" @click="toLocal">
        <i class="iconfont icon-a-zu4991"></i>
        <div class="txt">{{ city }}</div>
        <i class="iconfont icon-icon_more11"></i>
      </div>
      <div class="search" @click="toSearch">
        <i class="iconfont icon-sousuo1"></i>
        <div class="txt">请输入关键字搜索</div>
      </div>
    </div>
    <div class="swiper">
      <van-swipe :autoplay="autoplay" :show-indicators="false">
        <van-swipe-item v-for="(item, index) in rotation" :key="index" @click="toUrl(item)">
          <img :src="item.pic" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- :bgColor="'#fff'" -->
    <goodsList :goods="goodData" v-if="goodData" ></goodsList>
  </div>
</template>
<script>
import { scrollMixin } from "../../utils/mixin";
import goodsList from "../../components/goodsList.vue";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      city: "请选择区域",
      region_id: "",
      rotation: [],
      goodData: null,

      page: 1, //分页数，当前页数
      isLoadMore: true, //判断是否要加载更多的标志
      total_page: 0 //总页数
    };
  },
  components: { goodsList },
  activated() {
    console.log(this.$route.query);
    this.init();
    let yzSupplyArea = JSON.parse(window.localStorage.getItem('yzSupplyArea'));
    if(yzSupplyArea){
      this.region_id = yzSupplyArea.region_id;
      this.city = yzSupplyArea.area;
    }else{
      if (this.$route.query.area) {
        this.city = this.$route.query.area;
      }
      if (this.$route.query.region_id) {
        this.region_id = this.$route.query.region_id;
      }
    }
    this.getRotation();
    this.getData();
  },
  methods: {
    init() {
      this.goodData = [];
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
    },
    toUrl(item){
      if(item.url){
        window.location.href = item.url;
      }
    },
    toSearch(){
      this.$router.push(this.fun.getUrl("LeaseSearch",{},{region_id:this.$route.query.region_id,}));
    },
    toLocal(){
      this.$router.push(this.fun.getUrl("yzSupplyLeaseArea",{},{}));
    },
    getData() {
      $http
        .get("plugin.yz-supply-lease.api.goods.goods-list", { page: this.page,"search[region]": this.region_id }, " ")
        .then(response => {
          if (response.result === 1) {
            console.log(response.data);
            this.goodData = response.data.data;
            this.isLoadMore = true;
            this.total_page = response.data.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        $http.post("plugin.yz-supply-lease.api.goods.goods-list", { page: this.page }, "加载中").then(
          res => {
            this.isLoadMore = true;
            if (res.result === 1) {
              let myData = res.data.data;
              this.goodData = [...this.goodData, ...myData]; //数组拼接
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
            }
          },
          function(response) {
            console.log("response", response);
            // error callback
          }
        );
      }
    },
    getRotation() {
      $http
        .get("plugin.yz-supply-lease.api.goods.rotation-list", {}, " ")
        .then(response => {
          if (response.result === 1) {
            this.rotation = response.data;
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(err => {
          console.error(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.swiper {
  img {
    width: 100%;
    height: 0 auto;
  }
}
.headTop {
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  .local {
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .txt {
    margin: 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.search {
  // height: 1.75rem;
  width: 13.44rem;
  background: #f6f6f6;
  border-radius: 1.09rem;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  .icon-sousuo1 {
    color: #999999;
  }
  .txt {
    font-size: 0.75rem;
    color: #999999;
  }
}
.goodsbox {
  background: #ffffff;
}
</style>
